<html>
<head>

    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="/echarts/echarts.min.js"></script>
    <script src="/echarts/jquery-1.10.2.js"></script>
    <script src="/echarts/dataTool.min.js"></script>
    <script>



    </script>


</head>
<body style="background-color: #344b58">

<div id="main" style="width: 1000px;height:900px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 基于准备好的dom，初始化echarts实例
    var uploadedDataURL = "/echarts/data-1499235712572-BkKKrbcNZ.gexf";

    var xData = function() {
        var data = [];
        for (var i = 1; i < 13; i++) {
            data.push(i + "月");
        }
        return data;
    }();

    option = {
        backgroundColor: "#344b58",
        "title": {
            "text": "电影类型统计",
            x: "4%",

            textStyle: {
                color: '#fff',
                fontSize: '22'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '16',

            },
        },
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {
                "type": "shadow",
                textStyle: {
                    color: "#fff"
                }

            },
        },
        "grid": {
            "borderWidth": 0,
            "top": 80,
            "bottom": 95,
            textStyle: {
                color: "#fff"
            }
        },
        "legend": {
            x: '4%',
            top: '11%',
            textStyle: {
                color: '#90979c',
            },
            "data": ['动作', '爱情', '喜剧','科幻','动画']
        },


        "calculable": true,
        "xAxis": [{
            "type": "category",
            "axisLine": {
                lineStyle: {
                    color: '#90979c'
                }
            },
            "splitLine": {
                "show": false
            },
            "axisTick": {
                "show": false
            },
            "splitArea": {
                "show": false
            },
            "axisLabel": {
                "interval": 0,

            },
            "data": xData,
        }],
        "yAxis": [{
            "type": "value",
            "splitLine": {
                "show": false
            },
            "axisLine": {
                lineStyle: {
                    color: '#90979c'
                }
            },
            "axisTick": {
                "show": false
            },
            "axisLabel": {
                "interval": 0,

            },
            "splitArea": {
                "show": false
            },

        }],
        "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
                0
            ],
            bottom: 30,
            "start": 0,
            "end": 120,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
                color:"#d3dee5",

            },
            textStyle:{
                color:"#fff"},
            borderColor:"#90979c"


        }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
        }],
        "series": [{
            "name": "动作",
            "type": "bar",
            "stack": "",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
                "normal": {
                    "color": "rgba(255,144,128,1)",
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#fff"
                        },
                        "position": "insideTop",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [
                67779.9,
                75016.1,
                69987.2,
                87513.6,
                58711.6,
                76319.7,
                62259.5,
                76169.0,
                88993.2,
                69351.9,
                51605.7,
                69926.0,
            ],
        },

            {
                "name": "爱情",
                "type": "bar",
                "stack": "",
                "itemStyle": {
                    "normal": {
                        "color": "rgba(0,191,183,1)",
                        "barBorderRadius": 0,
                        "label": {
                            "show": true,
                            "position": "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                "data": [
                    15825.3,
                    23174.4,
                    20375.2,
                    21298.4,
                    16284,
                    17062.8,
                    23685.1,
                    16707.6,
                    19658.3,
                    20865.1,
                    21298.4,
                    19244.5
                ]
            }, {
                "name": "喜剧",
                "type": "bar",
                "stack": "",
                "itemStyle": {
                    "normal": {
                        "color": "rgba(0,129,194,214)",
                        "barBorderRadius": 0,
                        "label": {
                            "show": true,
                            "position": "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                "data": [
                    18926.4,
                    13774.4,
                    15676.7,
                    19803.8,
                    16469.4,
                    19720.8,
                    15624.8,
                    21109.9,
                    16718.9,
                    21654.8,
                    20039.6,
                    17438.8,
                ]
            }, {
                "name": "科幻",
                "type": "bar",
                "stack": "",
                "itemStyle": {
                    "normal": {
                        "color": "rgba(0,129,146,214)",
                        "barBorderRadius": 0,
                        "label": {
                            "show": true,
                            "position": "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                "data": [
                    14739.3,
                    15736.3,
                    13634.5,
                    20687.1,
                    19093.6,
                    11589.7,
                    17156.2,
                    11307.9,
                    16579,
                    14035.1,
                    13346.8,
                    12171.3,
                ]
            }, {
                "name": "动画",
                "type": "bar",
                "stack": "",
                "itemStyle": {
                    "normal": {
                        "color": "rgba(0,217,179,230)",
                        "barBorderRadius": 0,
                        "label": {
                            "show": true,
                            "position": "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                            }
                        }
                    }
                },
                "data": [
                    7871.2,
                    5609.2,
                    8154.5,
                    7099.9,
                    6306.8,
                    6885.8,
                    7228.5,
                    8659.7,
                    10369.3,
                    10393.4,
                    9162.7,
                    7866.7
                ]
            }
        ]
    };

    myChart.setOption(option);

</script>

</body>

</html>